<template>
  <div class="goodslist-con">
    <div class="list">
      <router-link tag="div" :to="'/home/goodsinfo/'+item.id" class="item" v-for="item in goodslist" :key="item.id">
        <img :src="item.img_url" alt />
        <h5 class="title">{{item.title}}</h5>
        <div class="info">
          <p class="price">
            <span class="new">￥{{item.sell_price}}</span>
            <span class="old">￥{{item.market_price}}</span>
          </p>
          <p class="sell">
            <span class="sda">热卖中</span>
            <span>剩余{{item.stock_quantity}}部</span>
          </p>
        </div>
      </router-link>
      <div class="dswf">
          <mt-button type="danger" size="large" @click="addMod">加载更多{{page}}</mt-button>
      </div>
      
    </div>

    
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      goodslist: [],
      islod:false
    };
  },
  created(){
      this.getGoodListByPage();
  },
  methods:{
      async getGoodListByPage(){
          const {data}=await this.$http.get("/api/getgoods?pageindex="+this.page);
         if(data.status===0){
             if(data.message.length<=0) this.islod=true;
             //console.log(data);
             return this.goodslist=this.goodslist.concat(data.message);
         }
      },
      addMod(){
          if(this.islod) return;
          this.page++;
          this.getGoodListByPage();
      }
  }
};
</script>

<style lang="scss" scoped>
.goodslist-con {
  .list {
    margin: 7px;
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .dswf{
        margin-top: 10px;
        width: 100%;
    }
    .item {
      margin-top: 7px;
      padding: 3px;
      width: 49%;
      box-shadow: 0 0 7px rgb(120, 194, 236);

      display: flex;
    //   改变主轴为竖轴
      flex-direction: column;//默认为row
      justify-content: space-between;

      img {
          min-height: 170px;
        width: 100%;
      }
      .title{
          line-height: 15px;
          font-size: 14px;
          max-height: 30px;
          overflow: hidden;
      }
      .info {
        background-color: #eee;
        overflow: hidden;
        .price {
          .new {
            font-size: 15px;
            color: red;
          }
          .old {
            font-size: 8px;
            margin-left: 15px;
            text-decoration: line-through;
          }
        }
        .sell {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          .sda {
            text-shadow: 2px -2px 6px red;
            color: red;
          }
        }
      }
    }
  }
}
</style>